<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReadCat - 开源免费的小说阅读器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            transition: all 0.3s ease;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #667eea;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-item {
            padding: 0.5rem 1rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #666;
            font-weight: 500;
        }

        .nav-item:hover, .nav-item.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateY(-2px);
        }

        .page-section {
            padding: 2rem;
            min-height: calc(100vh - 120px);
        }

        .content-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            margin: 0 auto;
            max-width: 1200px;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 2rem;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-section {
            text-align: center;
            padding: 4rem 0;
        }

        .hero-title {
            font-size: 3rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 2rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .btn {
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-secondary:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .book-shelf {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .book-item {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }

        .book-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border-color: #667eea;
        }

        .book-cover {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
        }

        .book-title {
            font-weight: bold;
            margin-bottom: 0.3rem;
            color: #333;
            font-size: 0.9rem;
        }

        .book-author {
            color: #666;
            font-size: 0.8rem;
        }

        .book-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #28a745;
            color: white;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
        }

        .reading-area {
            background: #fff;
            border-radius: 15px;
            padding: 2rem;
            margin-top: 1rem;
        }

        .reading-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f0f0f0;
        }

        .reading-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
        }

        .reading-progress {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: #666;
        }

        .progress-bar {
            width: 200px;
            height: 8px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            width: 35%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 4px;
        }

        .reading-content {
            line-height: 1.8;
            font-size: 16px;
            color: #333;
            text-align: justify;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 2rem;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 10px;
        }

        .close:hover {
            color: #000;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            color: white;
            font-weight: 500;
            z-index: 3000;
            transform: translateX(400px);
            transition: all 0.3s ease;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            background: #28a745;
        }

        .notification.error {
            background: #dc3545;
        }

        .notification.warning {
            background: #ffc107;
            color: #333;
        }

        .notification.info {
            background: #17a2b8;
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">
                📚 ReadCat
            </div>
            <ul class="nav-menu">
                <li class="nav-item active" data-section="home">首页</li>
                <li class="nav-item" data-section="library">书库</li>
                <li class="nav-item" data-section="reading">阅读</li>
                <li class="nav-item" data-section="settings">设置</li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- 首页部分 -->
        <section id="home" class="page-section">
            <div class="content-section">
                <div class="hero-section">
                    <h1 class="hero-title">📚 ReadCat</h1>
                    <p class="hero-subtitle">开源免费的现代化小说阅读器</p>
                    <div class="action-buttons">
                        <button class="btn btn-primary" onclick="showSection('library')">
                            📚 开始阅读
                        </button>
                        <a href="book-resources-fixed.html" class="btn btn-secondary" target="_blank">
                            🌐 免费书籍资源
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 书库部分 -->
        <section id="library" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">📚 我的书库</h2>
                <div class="action-buttons">
                    <button class="btn btn-primary" onclick="openModal('import-modal')">
                        ➕ 添加书籍
                    </button>
                    <button class="btn btn-secondary" onclick="refreshLibrary()">
                        🔄 刷新书库
                    </button>
                    <a href="book-resources-fixed.html" class="btn btn-secondary" target="_blank">
                        🌐 免费资源
                    </a>
                </div>

                <div class="book-shelf" id="bookShelf">
                    <!-- 书籍将通过JavaScript动态加载 -->
                </div>
            </div>
        </section>

        <!-- 阅读部分 -->
        <section id="reading" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">📖 正在阅读</h2>
                <div class="reading-area">
                    <div class="reading-controls">
                        <div class="reading-title" id="currentBookTitle">请选择一本书开始阅读</div>
                        <div class="reading-progress">
                            <span>35%</span>
                            <div class="progress-bar">
                                <div class="progress-fill"></div>
                            </div>
                            <span>第 12/34 章</span>
                        </div>
                    </div>
                    <div class="reading-content" id="readingContent">
                        <p>欢迎使用 ReadCat 阅读器！</p>
                        <p>这是一个功能强大的开源电子书阅读应用，支持多种格式的电子书阅读。</p>
                        <p>您可以从书库中选择一本书开始阅读，或者导入新的电子书文件。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 设置部分 -->
        <section id="settings" class="page-section" style="display: none;">
            <div class="content-section">
                <h2 class="section-title">⚙️ 设置</h2>
                <p>设置功能开发中...</p>
            </div>
        </section>
    </main>

    <!-- 导入书籍模态框 -->
    <div id="import-modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('import-modal')">&times;</span>
            <h3>📁 导入书籍</h3>
            <p>选择要导入的电子书文件：</p>
            <input type="file" accept=".txt,.epub,.pdf" style="margin-top: 20px;" onchange="handleFileImport(this)">
            <p style="color: #666; font-size: 0.9em; margin-top: 10px;">支持 TXT、EPUB、PDF 格式</p>
            <div style="text-align: center; margin-top: 20px;">
                <button class="btn btn-primary" onclick="closeModal('import-modal')">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 书籍数据管理
        let userBooks = [];

        // 加载用户书籍
        function loadUserBooks() {
            const saved = localStorage.getItem('readcat-user-books');
            if (saved) {
                try {
                    userBooks = JSON.parse(saved);
                } catch (e) {
                    userBooks = [];
                }
            }
            renderBookShelf();
        }

        // 保存用户书籍
        function saveUserBooks() {
            localStorage.setItem('readcat-user-books', JSON.stringify(userBooks));
        }

        // 添加书籍到书库
        function addBookToLibrary(book) {
            const exists = userBooks.find(b => b.title === book.title && b.author === book.author);
            if (exists) {
                showNotification('该书籍已存在于书库中', 'warning');
                return false;
            }

            userBooks.push({
                id: 'user_' + Date.now(),
                title: book.title,
                author: book.author,
                content: book.content,
                cover: book.cover || '📖',
                addedDate: new Date().toISOString(),
                readingProgress: 0
            });

            saveUserBooks();
            renderBookShelf();
            showNotification(`《${book.title}》已添加到书库`, 'success');
            return true;
        }

        // 渲染书架
        function renderBookShelf() {
            const bookShelf = document.getElementById('bookShelf');
            
            const defaultBooks = [
                { title: '三体', author: '刘慈欣', cover: '🌌' },
                { title: '红楼梦', author: '曹雪芹', cover: '🏮' },
                { title: '西游记', author: '吴承恩', cover: '🐒' },
                { title: '水浒传', author: '施耐庵', cover: '⚔️' },
                { title: '三国演义', author: '罗贯中', cover: '🏛️' },
                { title: '平凡的世界', author: '路遥', cover: '🌾' }
            ];

            const allBooks = [...defaultBooks, ...userBooks];

            bookShelf.innerHTML = allBooks.map(book => `
                <div class="book-item" onclick="openBook('${book.title}', '${book.author}', ${book.content ? `'${book.id}'` : 'null'})">
                    <div class="book-cover">${book.cover}</div>
                    <div class="book-title">${book.title}</div>
                    <div class="book-author">${book.author}</div>
                    ${book.id && book.id.startsWith('user_') ? '<div class="book-badge">已下载</div>' : ''}
                </div>
            `).join('');
        }

        // 页面切换功能
        function showSection(sectionId) {
            document.querySelectorAll('.page-section').forEach(section => {
                section.style.display = 'none';
            });
            
            document.getElementById(sectionId).style.display = 'block';
            
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-section="${sectionId}"]`).classList.add('active');
        }

        // 导航点击事件
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', () => {
                const section = item.getAttribute('data-section');
                showSection(section);
            });
        });

        // 模态框功能
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 打开书籍
        function openBook(bookTitle, bookAuthor, bookId) {
            document.getElementById('currentBookTitle').textContent = bookTitle;
            
            if (bookId && bookId !== 'null') {
                // 查找用户书籍内容
                const book = userBooks.find(b => b.id === bookId);
                if (book && book.content) {
                    document.getElementById('readingContent').innerHTML = `
                        <h3>${bookTitle}</h3>
                        <p><strong>作者：</strong>${bookAuthor}</p>
                        <hr style="margin: 1rem 0;">
                        <div style="white-space: pre-wrap;">${book.content.substring(0, 2000)}...</div>
                    `;
                } else {
                    document.getElementById('readingContent').innerHTML = `
                        <h3>${bookTitle}</h3>
                        <p>这是《${bookTitle}》的内容预览...</p>
                        <p>在这里您可以阅读完整的书籍内容。</p>
                    `;
                }
            } else {
                document.getElementById('readingContent').innerHTML = `
                    <h3>${bookTitle}</h3>
                    <p>这是《${bookTitle}》的内容预览...</p>
                    <p>在这里您可以阅读完整的书籍内容，使用各种阅读功能。</p>
                `;
            }
            
            showSection('reading');
        }

        // 刷新书库
        function refreshLibrary() {
            loadUserBooks();
            showNotification('书库已刷新！', 'success');
        }

        // 文件导入处理
        function handleFileImport(input) {
            const file = input.files[0];
            if (file) {
                if (file.type === 'text/plain' || file.name.endsWith('.txt')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const content = e.target.result;
                        const bookTitle = file.name.replace('.txt', '');
                        
                        const book = {
                            title: bookTitle,
                            author: '未知作者',
                            content: content,
                            cover: '📖'
                        };

                        if (addBookToLibrary(book)) {
                            closeModal('import-modal');
                        }
                    };
                    reader.readAsText(file, 'UTF-8');
                } else {
                    showNotification('目前只支持 TXT 格式文件', 'error');
                }
            }
        }

        // 从URL参数检查是否有新下载的书籍
        function checkForNewBook() {
            const urlParams = new URLSearchParams(window.location.search);
            const bookData = urlParams.get('book');
            
            if (bookData) {
                try {
                    const book = JSON.parse(decodeURIComponent(bookData));
                    addBookToLibrary(book);
                    
                    const newUrl = window.location.pathname;
                    window.history.replaceState({}, document.title, newUrl);
                    
                    showSection('library');
                } catch (error) {
                    console.error('解析书籍数据失败:', error);
                }
            }
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('show');
            }, 100);

            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 点击模态框背景关闭
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadUserBooks();
            checkForNewBook();
        });
    </script>
</body>
</html>